<template>
  <!--banner轮播-->
  <div class="swiper-container" ref="swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="banner in swiperList" :key="banner.id">
        <img :src="banner.imgUrl" />
      </div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</template>

<script>
  import Swiper from "swiper";
  import "swiper/css/swiper.min.css";
  export default {
    name: "Swiper",
    props: ["swiperList"],
    methods: {
      //初始化swiper
      swiperInit() {
        new Swiper(this.$refs.swiper, {
          // direction: "vertical", // 垂直切换选项
          loop: true, // 循环模式选项

          // 如果需要分页器
          pagination: {
            el: ".swiper-pagination",
          },

          // 如果需要前进后退按钮
          navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
          },
        });
      },
    },
    watch: {
      swiperList: {
        deep: true,
        immediate: true,
        handler() {
          this.$nextTick(() => {
            this.swiperInit();
          });
        },
      },
    },
  };
</script>

<style></style>
